<template>
  <el-dialog :visible.sync="dialogFormVisible" :title="textMap[dialogStatus]" width="500px"
             :close-on-click-modal="false">
    <el-form ref="dataForm" label-position="left" label-width="120px" style='width: 400px; margin-left:50px;'
             :model="formData" :rules="rules" size="mini">
      <el-form-item label="菜单名称" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
      <el-form-item label="父菜单" prop="parentId">
        <treeselect placeholder="请选择父级菜单" v-model="formData.parentId" :multiple="false"
                    :load-options="loadOptions"
                    :options="options"/>
      </el-form-item>
      <el-form-item label="菜单路径" prop="url">
        <el-input v-model="formData.url"></el-input>
      </el-form-item>
      <el-form-item label="图标名称" prop="properties">
        <el-input v-model="formData.properties"></el-input>
      </el-form-item>
      <el-form-item label="菜单别名" prop="code">
        <el-input v-model="formData.code"></el-input>
      </el-form-item>
      <el-form-item label="是否隐藏" prop="locked">
        <el-radio-group v-model="formData.locked">
          <el-radio :label="0">显示</el-radio>
          <el-radio :label="1">隐藏</el-radio>
        </el-radio-group>
      </el-form-item>

      <!--<el-form-item label="路由名称" prop="code" >-->
      <!--<el-input v-model="formData.code" ></el-input >-->
      <!--</el-form-item >-->

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="mini" @click="dialogFormVisible = false">取消</el-button>
      <el-button size="mini" v-if="dialogStatus==='create'" type="primary" @click="submitCreate">
        确定
      </el-button>
      <el-button size="mini" v-if="dialogStatus==='update'" type="primary" @click="submitSave">
        保存
      </el-button>
    </div>
  </el-dialog>

</template>
<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'
  import { addRouter, getDetail, update } from '@/api/menus'
  import{ modifyObj, resetDataForm } from '@/utils/tools'
  export default {
    components: {
      Treeselect
    },
    name: 'menuDialog',
    props: {
      menusOptions: {
        type: Array,
        default: []
      }
    },
    computed: {
      options(){
        return modifyObj(this.menusOptions)
      }
    },
    data(){
      return {
        dialogStatus: '',
        dialogFormVisible: false,
        formData: {
          id: null,
          name: null,
          parentId: null,
          properties: null,
          url: null,
          code: null,
          locked: 0
        },
        rules: {
          loginName: [{required: true, message: '请填写用户名', trigger: 'blur'}]
        },
        rules: {name: [{required: true, message: '请填写菜单名', trigger: 'blur'}]},
        textMap: {
          update: '修改菜单',
          create: '新建菜单'
        }
      }
    },
    methods: {
      submitCreate(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            addRouter(this.formData).then(res => {
              res = res.data
              this.$message({showClose: true, message: '创建成功', type: 'success'});
              this.dialogFormVisible = false
              this.$emit('submited-menu', res) //回调方法
            })
          }
        })
      },
      submitSave(){
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            if (this.formData.parentId === this.formData.id) {
              this.$message({showClose: true, message: '不能选择当前菜单作为父菜单', type: 'error'});
              return false
            }
            if (this.formData.parentId === undefined) {
              this.formData.parentId = 0
            }
            update(this.formData).then(res => {
              res = res.data
              this.$message({showClose: true, message: '更新成功', type: 'success'});
              this.dialogFormVisible = false
              this.$emit('submited-menu', res) //回调方法
            })
          }
        })
      },
      loadOptions({action, parentNode, callback/*, id */}){
        callback()
      },
      handleCreate() {
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].clearValidate()
          resetDataForm(this.$refs['dataForm'])
          this.formData.parentId = null
        })
      },
      handleEdit(id){
        this.dialogStatus = 'update'
        this.dialogFormVisible = true;
        this.formData.id = id
        this.$nextTick(() => {
          getDetail({id: id}).then(res => {
            res = res.data
            this.formData.name = res.data.name
            this.formData.properties = res.data.properties
            this.formData.url = res.data.url
            this.formData.code = res.data.code
            if (res.data.locked === null) {
              res.data.locked = 0
            }
            this.formData.locked = parseInt(res.data.locked)
            if (res.data.parentId !== null && res.data.parentId !== '0') {
              this.formData.parentId = res.data.parentId
            } else {
              this.formData.parentId = null
            }
          })
        })
      }
    }
  }
</script>
